/**
 * 功能描述: 文本输入框样式表
 * @author 崔孝楠
 * @date 2022/9/27 8:40
 * @version 1.0
 */
@import '../../style/index.scss';

// 输入框外部容器布局
@mixin input-affix-wrapper--layout {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 4px 11px;
  line-height: $line-height-base;
  display: inline-flex;
}

// large 布局
@mixin input-affix-wrapper-lg--layout {
  padding: 6.5px 11px;
}

// 内部输入框布局
@mixin wrapper-child-input--layout {
  padding: 0;
}

// 内部前置子元素布局
@mixin wrapper-child-before--layout {
  width: 0;
  visibility: hidden;
}

// 清除按钮布局
@mixin input-clear-icon--layout {
  margin: 0;
  vertical-align: -1px;
  display: none;
  width: $input-font-size;
}

// 前置后置标签样式
@mixin input-group-addon--layout {
  position: relative;
  padding: 0 11px;
  text-align: center;
  width: 1px;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}

// 组合输入框布局
@mixin input-group--layout {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: $line-height-base;
  position: relative;
  display: table;
  width: 100%;
}

// 输入框外部容器样式
@include b(input-affix-wrapper) {
  color: $color-text-primary;
  font-size: $input-font-size;
  background-color: $color-white;
  background-image: none;
  border: $border-base;
  border-radius: $border-radius-base;
  transition: all 0.3s;
  @include input-affix-wrapper--layout;
  // 占位符样式
  @include placeholder {
    color: $color-text-placeholder;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 1;
  };
  // 占位符样式
  &:placeholder-shown {
    text-overflow: ellipsis;
  }
  // 悬浮样式
  &:hover {
    border-color: $color-primary;
    border-right-width: 1px !important;
    z-index: 1;
  }
  //聚焦样式
  &:focus, &-focused {
    border-color: $color-primary;
    box-shadow: $input-focus-box-shadow;
    border-right-width: 1px !important;
    outline: 0;
    z-index: 1;
  }
}

// 输入框禁用
@include b(input-affix-wrapper-disabled) {
  color: $font-color-disabled-base;
  background-color: $background-color-base;
  border-color: $border-color-base;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  // 禁用悬浮样式
  &:hover {
    border-color: $border-color-base;
    border-right-width: 1px !important;
  }
  // 禁用状态输入框样式
  .#{$namespace}-input[disabled] {
    background: transparent;
  }
}

// 无边框样式
@include b(input-affix-wrapper-borderless) {
  &, &:hover, &:focus, &-focused, &-disabled {
    background-color: transparent;
    border: none;
    box-shadow: none;
  }
}

// large 样式
@include b(input-affix-wrapper-lg) {
  font-size: $input-font-size-lg;
  @include input-affix-wrapper-lg--layout;
}

// small 布局
@include b(input-affix-wrapper-sm) {
  padding: 0px 7px;
}

// 内部样式
@include b(input-affix-wrapper) {
  // 输入框样式
  > input.#{$namespace}-input {
    border: none;
    outline: none;
    @include wrapper-child-input--layout;

    &:focus {
      box-shadow: none !important;
    }
  }
  // 前置子元素样式
  &::before {
    content: '\a0';
    @include wrapper-child-before--layout;
  }
}

// 前缀后缀布局
.#{$namespace}-input-prefix,
.#{$namespace}-input-suffix {
  display: flex;
  flex: none;
  align-items: center;

  svg {
    width: 1em;
    height: 1em;
  }
}

// 前缀布局
@include b(input-prefix) {
  margin-right: 4px;
}

// 后缀布局
@include b(input-suffix) {
  margin-left: 4px;
}

// 清除按钮样式
@include b(input-clear-icon) {
  fill: $color-text-placeholder;
  cursor: pointer;
  transition: color 0.3s;
  @include input-clear-icon--layout;
   //悬浮样式
   &:hover {
     fill: $input-icon-hover;
   }
   // 点击样式
   &:active {
     fill: $input-icon-active;
   }
}
// 显示清除按钮
@include b(input-clear-icon-show) {
  display: block;
}

// 清除按钮后有后缀
 @include b(input-clear-icon-has-suffix) {
  margin: 0 4px;
}

 // 组合输入框容器布局
@include b(input-group-wrapper) {
  display: inline-block;
  width: 100%;
  text-align: start;
  vertical-align: top;
}
// 组合输入框样式
@include b(input-group) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  border-collapse: separate;
  border-spacing: 0;
  @include input-group--layout;
}

// 前置后置标签样式
@include b(input-group-addon) {
  color: $color-text-primary;
  font-weight: 400;
  font-size: $font-size-base;
  background-color: $background-color-base;
  border: $border-base;
  border-radius: $border-radius-base;
  transition: all .3s;
  @include input-group-addon--layout;
  // 第一个子元素样式
  &:first-child {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  // 最后一个子元素样式
  &:last-child{
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
